<template>
  <el-container class="h_100vh">
    <el-header height="42px" class="design-header px_0">
      <design-header></design-header>
    </el-header>
    <el-container>
      <transition>
        <el-aside v-if="designTreeShow" width="200px" class="design-tree">
          <Suspense>
            <template #default>
              <design-tree></design-tree>
            </template>
            <template #fallback>
              <div class="flex flex_row align_center justify_center h_100">
                <van-loading type="bars"></van-loading>
              </div>
            </template>
          </Suspense>
        </el-aside>
      </transition>
      <transition>
        <el-aside :width="designLibShow?'270px':'50px'" class="design-lib">
          <Suspense>
            <template #default>
              <design-lib></design-lib>
            </template>
            <template #fallback>
              <div class="flex flex_row align_center justify_center h_100">
                <van-loading type="bars"></van-loading>
              </div>
            </template>
          </Suspense>
        </el-aside>
      </transition>
      <el-main class="design-content">
        <Suspense>
          <template #default>
            <design-content></design-content>
          </template>
          <template #fallback>
            <div class="flex flex_row align_center justify_center h_100">
              <van-loading type="bars"></van-loading>
            </div>
          </template>
        </Suspense>
      </el-main>
      <transition>
        <el-aside v-if="designConfigShow" width="250px" class="design-config">
          <Suspense>
            <template #default>
              <design-config></design-config>
            </template>
            <template #fallback>
              <div class="flex flex_row align_center justify_center h_100">
                <van-loading type="bars"></van-loading>
              </div>
            </template>
          </Suspense>
        </el-aside>
      </transition>
    </el-container>
  </el-container>
</template>

<script>
import {
  computed,
  defineAsyncComponent,
  defineComponent,
  onMounted,
  watch,
} from "vue";
import { useDesignStore } from "../../store/design";
import { useRoute, useRouter } from "vue-router";

const designConfig = defineAsyncComponent(() =>
  import("../../components/func/page-design/design-config/index.vue")
);
const designContent = defineAsyncComponent(() =>
  import("../../components/func/page-design/design-content/index.vue")
);
const designHeader = defineAsyncComponent(() =>
  import("../../components/func/page-design/design-header/index.vue")
);
const designLib = defineAsyncComponent(() =>
  import("../../components/func/page-design/design-lib/index.vue")
);
const designTree = defineAsyncComponent(() =>
  import("../../components/func/page-design/design-tree/index.vue")
);
export default defineComponent({
  name: "design",
  props: {},
  components: {
    designConfig,
    designContent,
    designHeader,
    designLib,
    designTree,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const designStore = useDesignStore();
    const designTreeShow = computed(() => designStore.designTreeShow);
    const designLibShow = computed(() => designStore.designLibShow);
    const designConfigShow = computed(() => designStore.designConfigShow);
    const getPageInfo = () => {
      let page_url = route.params.id;
      if (page_url) {
        designStore.loadScreen(page_url);
      } else {
        router.push({ name: "404" });
      }
    };
    watch(
      () => route.params.id,
      (nv, ov) => {
        if (nv != ov) {
          getPageInfo();
        }
      }
    );
    onMounted(() => {
      getPageInfo();
    });
    return {
      designTreeShow,
      designLibShow,
      designConfigShow,
      getPageInfo,
    };
  },
});
</script>

<style scoped>
@import url("./design.less");
</style>